<template>
  <el-config-provider :locale="zhCn">
    <div class="h-screen w-screen">
      <el-splitter>
        <el-splitter-panel :min="panelSize" :size="panelSize" collapsible>
          <div class="py-5">
            <el-menu router :default-active="route.path">
              <el-menu-item
                v-for="(route, index) in sidebarRoutes"
                :index="route.path"
              >
                <span class="w-6 mr-2">{{ index + 1 + '. ' }}</span>
                {{ route.name }}
              </el-menu-item>
            </el-menu>
          </div>
        </el-splitter-panel>
        <el-splitter-panel :min="1000">
          <div class="min-h-screen p-5 bg-gray-100 grid-effect">
            <div class="pb-15">
              <router-view v-slot="{ Component }">
                <Transition name="fade" mode="out-in">
                  <!-- <keep-alive :include="['Home']"> -->
                  <component :is="Component" />
                  <!-- </keep-alive> -->
                </Transition>
              </router-view>
            </div>
          </div>
          <div class="fixed w-full bottom-0 px-5 py-2 flex gap-5 items-center">
            <span class="">{{ now.toLocaleTimeString() }}</span>

            <el-switch
              inactive-text="国际化"
              v-model="langSwtich"
              @change="changeLang"
            />
          </div>
        </el-splitter-panel>
      </el-splitter>
    </div>
  </el-config-provider>
</template>

<script setup lang="ts">
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import sidebarRoutes from '@/routes/sidebar'
// @ts-ignore
import translate from 'i18n-jsautotranslate'

const route = useRoute()

const now = useNow()

const lang = useLocalStorage('to', '')
const langSwtich = ref(lang.value === 'english')

const panelSize = ref(lang.value === 'english' ? 380 : 200)

const changeLang = () => {
  translate.changeLanguage(langSwtich.value ? 'english' : 'chinese_simplified')

  setTimeout(() => {
    panelSize.value = langSwtich.value ? 380 : 200
  }, +!langSwtich.value * 50)
}

translate.service.use('client.edge')
translate.whole.enableAll()
nextTick(() => {
  translate.execute()
  setTimeout(function () {
    translate.execute()
  }, 500)
  translate.listener.start()
})
onUpdated(async () => {
  translate.execute()
})
</script>

<style scoped lang="scss">
.grid-effect {
  background: repeating-linear-gradient(
      transparent,
      transparent 50px,
      rgba(0, 0, 0, 0.1) 50px,
      rgba(0, 0, 0, 0.1) 51px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 50px,
      rgba(0, 0, 0, 0.1) 50px,
      rgba(0, 0, 0, 0.1) 51px
    );
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
